<template>
  <div>
    <Card >
        <!--查询  -->
      <Row>
        <Form ref="formCustom" :model="formCustom" class="query_form" >
            <FormItem label="订单编号：" prop="ordersCode">
              <Input v-model="formCustom.ordersCode" icon="search" @on-change="handleSearch1"  placeholder="请输入订单编号" style="width: 200px" />
            </FormItem>
            <FormItem label="联系人：" prop="ordersRider">
               <Input v-model="formCustom.ordersRider"  icon="search" @on-change="handleSearch1" placeholder="请输入联系人" style="width: 200px" />
            </FormItem>
            <FormItem>
                <Button @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
            </FormItem> 
           
        </Form>
      </Row>
      <!-- 列表 -->
      <tables ref="tables"   editable searchable search-place="top" v-model="tableData"   @on-PageSize = "changePagesize" @on-change = "changePage" :pageTotal="pageTotal" :page="page" :rows="rows" :columns="columns" :loading = "loading" @on-delete="handleDelete"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
      <Tabledetail v-if="viewAccessAll" v-bind:visible = "visible" v-bind:ordersData="ordersData" @testChange="testChange2" @headCallBack="undateModal" ></Tabledetail>
      <Tableedit v-if="viewAccessSuper"  v-bind:edit = "edit" v-bind:ordersData="ordersData"  v-bind:data1 = "data1" @testChange="testChange1" @success="success" @headCallBack="undateModal1"></Tableedit>
       
    
    </Card>
  </div>
</template>

<script>
import { hasOneOf } from "@/libs/tools";
import Tables from "_c/tables";
import Tableedit from "./order-edit.vue";
import Tabledetail from "./order-detail.vue";
import {getTableData, getOrdersData,quOrderData } from "@/api/data";
import Cookies from "js-cookie";
const orderModeId = ["公务", "执法"];
const status = [
  "前台新提交",
  "前台审核未通过",
  "待调度指派",
  "订单被退回",
  "订单被取消",
  "指派方案未审核",
  "指派方案未同意",
  "指派方案同意",
  "司机拒接",
  "订单已确认",
  "司机已开始任务",
  "订单已完成",
  "费用审核完成",
  "订单提交财务",
  "订单已结算",
  "订单紧急终止"
];
export default {
  name: "order-new",
  components: {
    Tables,
    Tableedit,
    Tabledetail
  },
  data() {
    return {
      pageTotal: 0,
      page: 1,
      rows: 10,
      loading: true,
      edit: false,
      visible: false,
      ordersData: {},
      data1: [],
      ordersId: "",
      formCustom:{
          ordersCode:'',
          ordersRider:''
      },
      columns: [
        { title: "订单编号", key: "ordersCode" },
        { title: "用车部门", key: "deptName", editable: false },
        { title: "开始时间", key: "ordersStartTime", sortable: true },
        {
          title: "用车天数",
          key: "ordersEndTimeNum",
          render: (h, params) => {
            const row = params.row;
            return h("span", parseInt(params.row.ordersEndTimeNum));
          },
          sortable: true,
          sortMethod: function(a, b, type) {
            let at = parseInt(a);
            let bt = parseInt(b);
            if (type === "asc") {
              if (at > bt) {
                return bt;
              }
            } else {
              if (at < bt) {
                return bt;
              }
            }
          }
        },
        { title: "目的地", key: "ordersAimAddr" },
        { title: "乘车人", key: "ordersRider" },
        { title: "联系方式", key: "ordersRiderMobile" },
        {
          title: "用车类型",
          key: "modeId",
          render: (h, params) => {
            const row = params.row;
            if (row.modeId === 0) {
              return h("span", orderModeId[0]);
            }
          }
        },
        {
          title: "订单状态",
          key: "ordersStatus",
          render: (h, params) => {
            const row = params.row;
            if (row.ordersStatus === 1) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[0]
              );
            } else if (row.ordersStatus === 5) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[1]
              );
            } else if (row.ordersStatus === 10) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[2]
              );
            } else if (row.ordersStatus === 18) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[3]
              );
            } else if (row.ordersStatus === 20) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[4]
              );
            } else if (row.ordersStatus === 25) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[5]
              );
            } else if (row.ordersStatus === 28) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[6]
              );
            } else if (row.ordersStatus === 30) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[7]
              );
            } else if (row.ordersStatus === 33) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[8]
              );
            } else if (row.ordersStatus === 38) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[9]
              );
            } else if (row.ordersStatus === 40) {
              return h(
                "Tag",
                { props: { type: "dot", color: "primary" } },
                status[10]
              );
            } else if (row.ordersStatus === 45) {
              return h(
                "Tag",
                { props: { type: "dot", color: "warning" } },
                status[11]
              );
            } else if (row.ordersStatus === 50) {
              return h(
                "Tag",
                { props: { type: "dot", color: "geekblue" } },
                status[12]
              );
            } else if (row.ordersStatus === 55) {
              return h(
                "Tag",
                { props: { type: "dot", color: "warning" } },
                status[13]
              );
            } else if (row.ordersStatus === 60) {
              return h(
                "Tag",
                { props: { type: "dot", color: "success" } },
                status[14]
              );
            } else if (row.ordersStatus === 91) {
              return h(
                "Tag",
                { props: { type: "dot", color: "error" } },
                status[15]
              );
            }
          }
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.visible = true;
                      this.ordersId = params.row.ordersId;
                      this.getOrder();
                    }
                  }
                },
                "详情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.edit = true;
                      this.ordersId = params.row.ordersId;
                      this.getOrder();
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      tableData: []
    };
  },
  methods: {
    handleDelete(params) {
      console.log(params);
    },
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      });
    },
    changePage(val) {
      this.page = val;
      this.getDatas();
    },
    changePagesize(val) {
      this.rows = val;
      this.getDatas();
    },
    testChange1(val) {
      this.edit = val;
    },
    testChange2(val) {
      this.visible = val;
    },
    success(data) {
      this.edit = data.mode;
      this.getDatas();
    },
    undateModal(data) {
      this.visible = data.mode;
    },
    undateModal1(data) {
      this.edit = data.mode;
    },
    getOrder() {
      getOrdersData({
        ordersId: this.ordersId
      }).then(res => {
        this.ordersData = res[0];
      });
    },
    getDatas() {
      getTableData({
        page: this.page,
        rows: this.rows
      })
        .then(res => {
          if (res !== null) {
            this.loading = false;
            this.tableData = res.rows, 
            this.pageTotal = res.total;
          } else {
            this.loading = true;
            this.tableData = [];
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //查询
    handleSearch1 () {
       const data = {
           page:1,
           rows:10,
           ordersCode:this.formCustom.ordersCode,
           ordersRider:this.formCustom.ordersRider,
       }
        quOrderData(data).then(res =>{
           if (res !== null) {
            this.loading = false;
            this.tableData = res.rows;
             this.pageTotal = res.total;
          } else {
            this.loading = true;
            this.tableData = [];
          }
        }).catch(error => {
          console.log(err);
       });
    },
    handleClick(){
     console.log(name);
    },
    //重置
    handleReset (name) {
      this.$refs[name].resetFields();
      this.getDatas();
   },
  },
  mounted() {
      this.getDatas();
  },
  computed: {
    access() {
      return Cookies.get("access");
    },
    viewAccessAll() {
      return hasOneOf(["L202020", "L403010"], this.access);
    },
    viewAccessSuper() {
      return hasOneOf(["L202020"], this.access);
    }
  }
};
</script>
<style>
.ivu-tag-dot {
  line-height: 32px !important;
  border: none !important;
}
.ivu-tag-geekblue .ivu-tag-dot-inner {
  background: #2f54eb;
}
.query_form .ivu-form-item{
float:left;
margin-right:16px;
margin-bottom:0;
}
.query_form .ivu-form-item-content{
  float:left;
}

</style>
